<template>
  <fui-bottom-popup :class="className" :show="visible" @close="close">
    <view class='ui-modal'>
      <view class="ui-modal-header" v-if="showHeader">
        <view class="ui-modal-title" v-if="title">{{title}}</view>
        <fui-icon name="close" v-if="showCloseBtn" size="48" color="#999" @click="close"></fui-icon>
      </view>
      <view class="ui-modal-body">
        <slot></slot>
      </view>
      <view class="ui-modal-footer" v-if="showFooter">
        <fui-button class="ui-modal-btn ui-btn-primary_plain" v-if="showCancelBtn" :text="cancelText" height="78rpx" @click="cancel"></fui-button>
        <fui-button v-if="showConfirmBtn" class="ui-modal-btn" :text="okText" height="78rpx" @click="confirm"></fui-button>
      </view>
    </view>
  </fui-bottom-popup>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  className: {
    type: String,
    default: ''
  },
  showHeader: {
    type: Boolean,
    default: true
  },
  title: {
    type: String,
    default: ''
  },
  showCloseBtn: {
    type: Boolean,
    default: false
  },
  showFooter: {
    type: Boolean,
    default: true
  },
  showConfirmBtn: {
    type: Boolean,
    default: true
  },
  okText: {
    type: String,
    default: '确认'
  },
  showCancelBtn: {
    type: Boolean,
    default: true
  },
  cancelText: {
    type: String,
    default: '取消'
  }
})

const emits = defineEmits(['confirm', 'cancel'])

const visible = ref(false)

const show = () => {
  visible.value = true
}

const close = () => {
  visible.value = false
}

const confirm = () => {
  emits('confirm')
}

const cancel = () => {
  emits('cancel')
}

defineExpose({
  show,
  close
})
</script>

<style lang='scss' scoped>
.ui-modal {
  background: #fff;
  border-radius: 36rpx 36rpx 0 0;
  padding: 28rpx 36rpx;
  .ui-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    .ui-modal-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }
  .ui-modal-content {
    min-height: 100rpx;
  }
  .ui-modal-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 44rpx;
    margin-bottom: 44rpx;
    .ui-modal-btn {
      flex: 1;
      margin: 0 32rpx !important;
    }
  }
}
</style>